<template>
    <a-drawer bordered title="详情" placement="right" :closable="false" :visible="show" @close="onClose" width="500">
        <a-descriptions>
            <a-descriptions-item label="ID">
                {{data?.id}}
            </a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
            <a-descriptions-item label="答案类型">
                {{answersType.find(x=>x.value ===data?.answersType)?.name}}
            </a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
            <a-descriptions-item label="风险级别">
                {{data?.dangerLevel}}
            </a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
            <a-descriptions-item label="适用组织ID">
                {{data?.orgIds}}
            </a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
            <a-descriptions-item label="适用组织名称">
                <span v-for="(item,index) in data?.orgNames" :key="index">
                    <a-tag color="pink"> {{item}} </a-tag>
                </span>
            </a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
            <a-descriptions-item label="状态">
                {{statusList.find(x=>x.value ===data?.questionStatus)?.name}}
            </a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
            <a-descriptions-item label="问题描述">
                {{data?.questionTitle}}
            </a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
            <a-descriptions-item label="问题描述">
                {{data?.questionType}}
            </a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
            <a-descriptions-item label="问题选项列表">
                <a-space direction="vertical">
                    <div v-for="(item,index) in data?.questionOptionDTOList" :key="index">
                        <a-tag  color="#f50"> {{item.title}} </a-tag>
                    </div>
                </a-space>
            </a-descriptions-item>
        </a-descriptions>
        <div :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }">
            <a-button type="primary" @click="show = false">
                关闭
            </a-button>
        </div>
    </a-drawer>
</template>
<script>
    export default {
        props: {
            // 状态
            statusList: {
                default: () => { },
                type: Array,
            },
            // 答案类型
            answersType: {
                default: () => { },
                type: Array,
            },
        },
        data() {
            return {
                // 是否显示
                show: false,
                // 详情数据
                data: {},
            }
        },
        methods: {
            /**
             * 打开抽屉
             */
            open(data) {
                this.data = data
                this.show = true
            },
            showDrawer() {
                this.show = true;
            },
            onClose() {
                this.show = false;
            },
        },
    }
</script>